<template>
  <div class="user-select">
    <el-input v-model="nickName"
              readonly
              :size="inputSize"
              :disabled="inputDisabled"
              :placeholder="placeholder"
            >
      <template #append>
        <el-button icon="Search" @click="openUserSelectDialog"/>
      </template>
    </el-input>

    <span class="user-select-clear-icon" v-if="showClearIcon" @click="clearInput">
      <el-icon>
        <circle-close/>
      </el-icon>
    </span>

    <el-dialog v-model="userSelectDialogVisible"
               title="选择人员"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="60%"
               append-to-body>
      <template #default>
        <el-form :model="queryForm" inline>
          <el-form-item prop="userName" label="工号">
            <el-input v-model="queryForm.userName" clearable placeholder="请输入工号"/>
          </el-form-item>
          <el-form-item prop="nickName" label="姓名">
            <el-input v-model="queryForm.nickName" clearable placeholder="请输入姓名"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getUserList">搜索</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="userList"
                  ref="userListTableRef"
                  :current-row-key="valueField"
                  :row-key="valueField"
                  v-loading="loadingUser"
                  highlight-current-row
                  @row-click="handleRowClick"
                  @row-dblclick="submitValue">
          <el-table-column align="center" type="index" label="序号" width="80"/>
          <el-table-column align="center" prop="userName" label="工号"/>
          <el-table-column align="center" prop="nickName" label="姓名"/>
          <el-table-column align="center" prop="dept.deptName" label="部门"/>
        </el-table>

        <pagination :total="userTotal"
                    v-model:page="queryForm.pageNum"
                    v-model:limit="queryForm.pageSize"
                    @pagination="getUserList"/>
      </template>
      <template #footer>
        <el-button type="primary" @click="submitValue">确定</el-button>
        <el-button @click="cancelSubmit">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { formContextKey, formItemContextKey } from 'element-plus'
import {listUser, getUserByUserName, getUser} from "@/api/system/user";
import {CircleClose} from "@element-plus/icons-vue";

export default {
  name: "index",
  components: {CircleClose},
  inject: {
    elForm: {
      from: formContextKey,
      default: {  }
    },
    elFormItem: {
      form: formItemContextKey,
      default: {  }
    }
  },
  emits: ['update:modelValue'],
  props: {
    modelValue: [String, Number],
    valueField: {
      type: String,
      default: 'userId'
    },
    size: String,
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: String
  },
  computed: {
    inputSize() {
      return (
        this.size ||
        this.elFormItem.size ||
        this.elForm.size
      )
    },
    inputDisabled() {
      return (
        this.disabled ||
        this.elFormItem.disabled ||
        this.elForm.disabled
      )
    },
    showClearIcon() {
      return this.nickName.length > 0
    }
  },
  data() {
    return {
      nickName: '',
      userSelectDialogVisible: false,
      queryForm: {
        userName: '',
        nickName: '',
        pageNum: 1,
        pageSize: 10
      },
      loadingUser: false,
      userList: [],
      userTotal: 0,
      tempModelValue: '',
      tempNickName: ''
    }
  },
  created() {
    if (this.valueField === 'userId') {
      if (!isNaN(this.modelValue) && this.modelValue !== '') {
        getUser(this.modelValue).then(res => {
          this.nickName = res.data.nickName
        })
      }
    } else if (this.valueField === 'userName') {
      if (this.modelValue !== '' && this.modelValue !== null && this.modelValue !== undefined) {
        getUserByUserName(this.modelValue).then(res => {
          this.nickName = res.data.nickName
        })
      }
    }
  },
  methods: {
    reset() {
      this.resetQueryForm()
      this.getUserList()
    },
    resetQueryForm() {
      this.queryForm = {
        userName: '',
        nickName: '',
        pageNum: 1,
        pageSize: 10
      }
    },
    openUserSelectDialog() {
      this.resetQueryForm()
      this.getUserList()
      this.userSelectDialogVisible = true
    },
    getUserList() {
      listUser(this.queryForm).then(res => {
        const {rows, total} = res

        this.userList = rows
        this.userTotal = total

        this.$refs.userListTableRef.setCurrentRow(rows)
        this.$nextTick(() => {
          for (const row of rows) {
            if (this.modelValue === row[this.valueField]) {
              this.$refs.userListTableRef.setCurrentRow(row)
              return
            }
          }
        })
      })
    },
    handleRowClick(row) {
      this.tempModelValue = row[this.valueField]
      console.log('12212',row);
      console.log('22222222222222222222222',this.tempModelValue);
      this.tempNickName = row.nickName
    },
    submitValue() {
      this.$emit('update:modelValue', this.tempModelValue)
      console.log(this.tempModelValue);
      this.nickName = this.tempNickName
      console.log(this.nickName);
      this.userList = []
      this.userTotal = 0
      this.userSelectDialogVisible = false
    },
    cancelSubmit() {
      this.userList = []
      this.userTotal = 0
      this.userSelectDialogVisible = false
    },
    clearInput() {
      this.nickName = ''
      this.$emit('update:modelValue', '')
    }
  }
}
</script>

<style scoped lang="scss">
.user-select {
  position: relative;

  .user-select-clear-icon {
    position: absolute;
    right: 55px;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgb(96, 98, 102);
  }
}
</style>
